<template>
    <rx-dialog @handOk="onOk" @cancel="cancel">
    <rx-layout>
        <div slot="center">
            <span>&lt;template #{{mdl.field}}Title="{column}"&gt;</span>
            <div ref="codeBox" style="height: 50%">
                <rx-codemirror ref="listHtml" placeholder="&lt;span v-html='text'&gt;&lt;/span&gt;"
                               :height="'100%'"
                               :mode="'sql'"
                               v-model="mdl.customTitle"
                >
                </rx-codemirror>
            </div>
            <span>&lt;/template&gt;</span>
        </div>
    </rx-layout>
    </rx-dialog>
</template>

<script>
    import {RxDialog,RxLayout, RxCodemirror, Util} from "@lowcode/jpaas-common-lib";
    export default {
        name: "FormBoListCellHeader",
        props:["render","layerid","destroy"],
        components: {
            RxDialog,
            RxLayout,
            RxCodemirror
        },
        data() {
            return {
                labelCol: {span: 6},
                wrapperCol: {span: 18},
                labelCol1: {span: 3},
                wrapperCol1: {span: 19},
                form: this.$form.createForm(this),
                mdl: {}
            }
        },
        created() {
            this.setData(this.render);
        },
        methods:{
            onOk(){
                Util.closeWindow(this, "ok");
            },
            cancel(){
                Util.closeWindow(this,"cancel");
            },
            setData(data) {
                this.mdl = data;
                this.codeMirror();
            },
            codeMirror(){
                var _this = this ;
                this.$nextTick(function () {
                    setTimeout(function () {
                        _this.$refs.listHtml.refresh();
                    },800)
                })
            },
            getData() {
                if(!this.mdl.customTitle){
                    delete this.mdl.customTitle;
                }
                return this.mdl;
            }
        }
    }
</script>

<style scoped>

</style>